<template>
	<view>
		<z-paging-swiper style="flex: 1;">
			<template #top>
				<view class="status_bar"></view>
				<!-- style="width: 350rpx;" -->
				<view style="display: flex; flex-direction: row; background-color: #fff;">
					<z-tabs tab-width="100"  ref="tabs" :list="tabList" :current="current" @change="tabsChange" active-color="#ab7aff"
					:active-style="{'font-size':'40rpx'}" :tabs-style="{'width':'300rpx'}"/>
				</view>
				
			</template>
			<swiper class="swiper" :current="current" @transition="swiperTransition"
				@animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<home-list-item :tabIndex="index" :currentIndex="current"></home-list-item>
				</swiper-item>
			</swiper>
		</z-paging-swiper>

		<u-popup v-model="ticketVisiable" mode="bottom" border-radius="30" height="550" :safe-area-inset-bottom="true" :mask-close-able="false">
			<view class="popup">
				<view class="title">
					为什么要支付
				</view>
				<view class="tip">
					为过滤非诚意用户，避免微商，酒托，广告等骚扰，打造纯净私密的交友空间，保证产品持续稳定运营。需支付一定费用，成为会员
				</view>
				<view class="price">
					￥{{ticketPrice}}
				</view>
				<view class="type" v-for="(item, index) in payTypes" :key="index" @click="onItemPay(index)">
					<image :src="item.icon"></image>
					<view class="tip">{{item.title}}</view>
					<u-checkbox-group>
						<u-checkbox v-model="item.checked" shape="circle"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
					<u-button type="primary" @click="requestPay">确定支付</u-button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabList: ['人气', '活跃'],
				current: 0,
				payTypes: [{
						payType: 1,
						icon:this.getImageUrl('pay_alipay.png'),
						title: '支付宝支付',
						checked: false
					},
					{
						payType: 2,
						icon: this.getImageUrl('pay_wechat.png'),
						title: '微信支付',
						checked: false
					},
				],
				ticketVisiable: false,
				payType: '',
				projectId: 4,
				ticketPrice: '28'
			};
		},
		onShow() {
			setTimeout(()=>{
				this.showDialogTicket();//为啥要延迟，防止读写配置文件慢于
			}, 500)
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			onItemPay(index) {
				this.payTypes.forEach(item => {
					item.checked = false
				});
				this.payTypes[index].checked = true;
			},
			async showDialogTicket(){
				let showFlag = false;
				let vipManage = uni.getStorageSync("vipManage");
				console.log('vipManage: ',vipManage);
				if(1 == vipManage || 2 == vipManage){
					let res = await this.$common.post("/app/tickUserInfo/info");
					if(0 == res.code){
						if(1 != res.data.windowTicket){
							console.log('getApp().globalData.openTicketMin: ',getApp().globalData.openTicketMin);
							console.log('getApp().globalData.openTicketMin: ',uni.getStorageSync("ticketOver" + uni.getStorageSync('userId')));
							if (
								1 == vipManage //门票开
								|| getApp().globalData.openTicketMin //门票3分钟:已到
								|| uni.getStorageSync("ticketOver" + uni.getStorageSync('userId')))//门票3分钟已到：再次启动
							{
								showFlag = true;
								let ticketRes = await this.$common.post("/app/tickPrice/info");
								if (0 == ticketRes.code) {
									this.ticketPrice = ticketRes.data.price;
									this.projectId = ticketRes.data.id;
								}
							} else {
								getApp().toTicket();
							}
						}
					}
				}
				if(showFlag){
					uni.hideTabBar()
				}else{
					uni.showTabBar()
				}
				this.ticketVisiable = showFlag;
			},
			
			async requestPay() {
				let payType = '';
				this.payTypes.forEach(item => {
					if (item.checked) {
						payType = item.payType;
					}
				});
				if (!payType) {
					uni.showToast({
						title: '请选择支付类型',
						icon: 'none'
					})
					return
				}

				let url = '/api/aliPayVersion3/transactionsH5';
				if (2 == payType) {
					url = '/api/wechatVersion3/rechargeH5';
				}

				const params = {
					type: '3',
					projectId: this.projectId
				}
				let res = await this.$common.post(url, params);
				if (0 == res.code) {
					this.ticketVisiable = false;
					const webview = plus.webview.create('', 'custom-webview');
					webview.loadURL(res.data.payUrl, {
						'Referer': 'http://api.ptszyxx.com://'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.swiper {
		height: 100%;
	}

	.popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100wh;
		height: 100%;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}
		
		.tip{
			font-size: 20rpx;
			color: #888;
		}
		
		.price{
			font-size: 50rpx;
			color: mediumvioletred;
			text-align: center;
		}
		
		.type {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: #222;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tip {
				flex: 1;
			}

		}
	}
</style>